<template>
  <div class="contact">
    <div class="bgg">
      <div class="card_title">
        联系方式
      </div>
      <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 19px">

        <a-radio-group
          class="br4"
          v-model="status"
          style="margin-bottom: 5px;margin-left:5px;"
          @change="statusChange">
          <a-radio-button :value="-1">
            所有员工
          </a-radio-button>
          <a-radio-button :value="1">
            在职员工
          </a-radio-button>
          <a-radio-button :value="2">
            离职员工
          </a-radio-button>
        </a-radio-group>

        <div class="flex row_left flex_wrap">

          <a-input-search
            placeholder="员工 / 联系方式"
            style="width: 200px;margin-right:5px;margin-bottom: 5px"
            v-model="search"
            @search="onSearch"
          />
          <a-button type="primary" @click="drawershow = true">
            添加
          </a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :rowKey="activity => activity.uc_id"
        :dataSource="activity"
        :loading="loading"
        @change="handleTableChange"
        :pagination="pagination"
      >
        <div slot="index" slot-scope="text, row,index">
          <!--          <span-->
          <!--            class="index"-->
          <!--            :style="{-->
          <!--              backgroundColor:index<3? '#314659':'#f5f5f5',-->
          <!--              color:index<3? '#ffffff':'#101010',-->
          <!--            }">{{ index+1 }}</span>-->
          {{ index+1 }}
        </div>
        <div slot="rank" slot-scope="text,row">
          {{ row.rank >0 ? '在职' : '离职' }}
        </div>
        <div slot="actice" slot-scope="text,row">
          <a-button type="link" @click="opend(row)">
            编辑
          </a-button>
          <a-popconfirm placement="bottom" ok-text="确定" cancel-text="取消" @confirm="doDelContactInfo(row.id)">
            <template #title>
              <p>是否删除?</p>
            </template>
            <a-button type="link">
              <span style="color:red">删除</span>
            </a-button>
          </a-popconfirm>
        </div>

      </a-table>
    </div>
    <a-drawer
      title="成员编辑"
      :width="513"
      :visible="drawershow"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles">用户名</div>
        <a-input v-model="user" placeholder="请输入用户名"/>
        <div class="titles">联系方式</div>
        <a-input v-model="uc_contact" placeholder="请输入联系方式"/>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button
            type="primary"
            style="float:left;"
            :disabled="btnloading"
            :loading="btnloading"
            class="br4"
            @click="dosubmit">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            确认修改
          </a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
  import { getWebContactInfo, doDelContactInfo, doAddUserContactInfo } from '@/api/admin/staff'
  import moment from 'moment'

  export default {
    name: 'Contact',
    data () {
      return {
        moment,
        uc_contact: '',
        user: '',
        status: -1,
        id: '',
        drawershow: false,
        search: '',
        columns: [
          {
            title: '序号',
            align: 'center',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            title: '用户',
            align: 'left',
            dataIndex: 'uc_mark',
            scopedSlots: {
              customRender: 'uc_mark'
            }
          },
          {
            title: '状态',
            align: 'left',
            // dataIndex: 'rank',
            scopedSlots: {
              customRender: 'rank'
            }
          },
          {
            title: '联系方式',
            align: 'center',
            dataIndex: 'uc_contact',
            scopedSlots: {
              customRender: 'uc_contact'
            }
          },
          {
            title: '操作',
            align: 'center',
            dataIndex: 'actice',
            scopedSlots: {
              customRender: 'actice'
            }
          }
        ],
        activity: [
          // {
          //   rank: '1',
          //   uc_contact: '2880499348',
          //   uc_id: 988,
          //   uc_mark: '孙金贤'
          // }
        ],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        btnloading: false
      }
    },

    computed: {},
    created () {
      this.getWebContactInfo(1)
    },
    mounted () {
    },
    methods: {
      doDelContactInfo (id) {
        doDelContactInfo({
          id: id
        }).then(res => {
          console.log(res)
          this.$message.success('删除成功!')
          this.getWebContactInfo(1)
        }).catch(err => {
          console.log(err)
        })
      },
      dosubmit () {
        this.btnloading = true
        if (this.id === '') {
          if (this.uc_contact !== '' && this.user !== '') {
            doAddUserContactInfo({
              uc_contact: this.uc_contact,
              user: this.user
            }).then(res => {
              console.log(res)
              this.$message.success('添加成功!')
              this.getWebContactInfo(1)
              this.btnloading = false
            }).catch(err => {
              this.btnloading = false
              console.log(err)
            })
          } else {
            this.btnloading = false
            this.$message.info('请检查用户名或者联系方式')
          }
        } else {
          // 编辑
        }
      },
      onClose () {
        this.uc_contact = ''
        this.user = ''
        this.drawershow = false
      },
      opend (row) {
        console.log(row)
        if (row) {
          this.uc_contact = row.uc_contact
          this.user = row.uc_mark
          this.id = row.uc_id
        }
        this.drawershow = true
      },
      dodel (row) {
        console.log(row)
      },
      getWebContactInfo (page) {
        this.loading = true
        getWebContactInfo({
          page: page,
          pagesize: 15,
          status: this.status, // -1全部，1在职 2离职
          search: this.search
        })
          .then(res => {
            // console.log(res)
            this.activity = res.data.data
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getWebContactInfo(params.page)
      },
      onSearch (value) {
        console.log(value)
        this.getWebContactInfo(1)
      },
      statusChange (e) {
        // console.log('radio checked', e.target.value)
        this.getWebContactInfo(1)
      }
    }
  }
</script>
<style lang="less" scoped>
  .contact {
    /deep/ .ant-select-selection {
      border-radius: 4px;
    }

    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

  }
</style>
